<template>
	<view class="search-list">
		<bangs></bangs>
		
		<!-- 自定义导航栏 -->
		<view class="bg-white d-flex a-center" style="height: 90rpx;position: fixed;left: 0;right: 0;z-index: 100;">
			<span class="iconfont icon-2fanhui ml-2" @click="oldreute"></span>
			<input type="text" v-model="keyword" class="flex-1 bg-light rounded ml-2 px-2" style="height: 65rpx;" placeholder="车厘子">
			<view class="d-flex a-center j-center" style="width: 85rpx;" @click="search">搜索</view>
		</view>
		
		<view style="height: 90rpx;"></view>
		
		<!-- 筛选按钮 -->
		<view class="d-flex a-center border-top border-bottom position-fixed left-0 right-0 bg-white" style="height: 100rpx;z-index: 100;">
			<view class="d-flex flex-1 a-center j-center font-md" v-for="(item,index) in screen.list" :key="index" @tap="changeScreen(index)">
				<text>{{item.name}}</text>
				<view>
					<view :class="item.status === 1?'main-text-color':'text-light-muted'" class="iconfont icon-paixu-shengxu line-h0"></view>
					<view :class="item.status === 2?'main-text-color':'text-light-muted'" class="iconfont icon-paixu-jiangxu line-h0"></view>
				</view>
			</view>
			
			
			<view class="d-flex flex-1 a-center j-center font-md main-text-color">
				<text>综合</text>
				<view>
					<view class="iconfont icon-paixu-shengxu line-h0"></view>
					<view class="iconfont icon-paixu-jiangxu line-h0"></view>
				</view>
			</view>
		</view>
		
		<view style="height: 90rpx;"></view>
		
		<!-- 列表 -->
		<view class="row j-sb">
			<block v-for="(item,index) in list" :key="index">
				<common-list :item="item"></common-list>
			</block>
		</view>
		<divider></divider>
		<view class="d-flex a-center j-center text-light-muted font-md py-3">
			{{loadtext}}
		</view>
	</view>
</template>

<script>
	import commonList from "@/components/common/common-list.vue"
	export default {
		data() {
			return {
				list:[],
				// 1.上拉加载更多 2.加载中... 3.没有更多了
				loadtext:"上拉加载更多",
				keyword:'',
				page:1,
				screen:{
					currentIndex:0,
					list:[
						{ name:"综合",status:2,key:"all" },
						{ name:"销量",status:0,key:"sale_count" },
						{ name:"价格",status:0,key:"min_price" },
					]
				}
			}
		},
		components:{
			commonList
		},
		onLoad(e) {
			this.keyword = e.keyword
			this.getData()
		},
		computed:{
			// 排序相关
			options() {
				let obj = this.screen.list[this.screen.currentIndex]
				let value = obj.status === 1 ? 'asc' : 'desc'
				return {
					[obj.key]:value
				}
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getData(true,()=>{
				uni.showToast({
					title:"完成刷新",
					icon:'none'
				})
				uni.stopPullDownRefresh()
			});
		},
		//上拉加载
		onReachBottom() {
			// 是否已经处于加载状态
			if (this.loadtext !== '上拉加载更多') return;
			this.loadtext = '加载中...'
			this.page++;
			// 请求数据
			this.getData(false)
		},
		methods: {
			//初始化数据
			getData(refresh = true, callback = false){
				let page = refresh ? 1 : this.page;
				this.$H.post('/goods/search',{
					key:this.keyword,
					page:page,
					...this.options
				}).then(res=>{
					let list = res.msg;
					this.list = refresh ? [...list] : [...this.list,...list],
					// 恢复加载状态
					this.loadtext = res.msg.length < 10 ? '没有更多了' : '上拉加载更多'
					if(typeof callback === 'function'){
						callback()
					}
				})
			},
			//判断当前点击选中事件
			changeScreen(index){
				// 判断当前点击是否已经是激活状态
				let oldIndex = this.screen.currentIndex;
				let oldItem = this.screen.list[oldIndex];
				if(oldIndex === index){
					oldItem.status = oldItem.status === 1? 2 : 1
					//加载数据
					this.getData()
					return
				}
				//当你点击的不是第一个的时候
				let newIitem = this.screen.list[index]
				// 移除旧激活状态
				oldItem.status = 0
				this.screen.currentIndex = index
				// 增加新激活状态
				newIitem.status = 1
				// 加载数据
				this.getData()
			},
			search(){
				if(this.keyword ===''){
					return uni.showToast({
						title:"搜索栏不能为空",
						icon: 'none'
					})
				}
				
				// 加载数据
				this.getData()
			},
			oldreute(){
				// 退回到上一页
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>

</style>
